Lazy Loading এবং Guards (গার্ডস) Angular অ্যাপ্লিকেশনের পারফরম্যান্স এবং নিরাপত্তা বাড়ানোর জন্য খুবই গুরুত্বপূর্ণ ফিচার। Lazy Loading ব্যবহার করে আপনি কেবলমাত্র প্রয়োজনীয় মডিউলগুলোকে লোড করেন, যা অ্যাপ্লিকেশনের প্রথম লোডিং টাইম কমায়। অপরদিকে, Guards ব্যবহার করে রাউটগুলির অ্যাক্সেস নিয়ন্ত্রণ করা যায়—যেমন, যদি কোন রাউট অ্যাক্সেস করার আগে কিছু শর্ত পূর্ণ না হয় তবে সেটি রোধ করা।

এখানে আমরা দেখব কীভাবে Lazy Loading এবং Guards একসাথে কাজ করে এবং অ্যাপ্লিকেশনে নিরাপত্তা এবং পারফরম্যান্স বাড়ায়।

Lazy Loading কী?

Lazy Loading হল একটি কৌশল যার মাধ্যমে আপনি অ্যাপ্লিকেশনের মডিউলগুলোকে ডাইনামিকভাবে লোড করতে পারেন। এর মাধ্যমে অ্যাপ্লিকেশনের প্রথম লোডিং সময় কমানো যায় এবং অবশিষ্ট মডিউলগুলো প্রয়োজনের সময় লোড হয়। এটি Angular অ্যাপ্লিকেশনকে আরও স্কেলেবল এবং দ্রুত কার্যকর করে।

Angular-এ Lazy Loading কিভাবে কাজ করে?

Lazy loading বাস্তবায়ন করতে, আপনি Angular রাউটিং কনফিগারেশনে মডিউলগুলোর জন্য loadChildren ব্যবহার করেন। এটি নির্দিষ্ট মডিউলকে লোড করার জন্য ওয়েবপেজের প্রথম লোডের সময় অপেক্ষা না করে, শুধুমাত্র যখন ব্যবহারকারী সেই রাউটে নেভিগেট করে তখন মডিউলটি লোড করবে।

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

এখানে feature রাউটে গিয়েই FeatureModule লোড হবে।

Guards কী?

Guards হল Angular-এর এমন ফিচার যা রাউট এর আগে কিছু শর্ত চেক করে। Guards তিন ধরনের হয়ে থাকে:

1. CanActivate: রাউটটি অ্যাক্সেস করার আগে শর্ত যাচাই করে।
2. CanActivateChild: রাউটের কোনো চাইল্ড রাউট অ্যাক্সেস করার আগে শর্ত যাচাই করে।
3. CanLoad: মডিউলটি লোড করার আগে শর্ত যাচাই করে।

Guards দিয়ে আপনি নিশ্চিত করতে পারেন যে ইউজার কোনো রাউট অ্যাক্সেস করার আগে কিছু শর্ত পূরণ করেছে, যেমন লগইন বা বিশেষ অনুমতির শর্ত।

Lazy Loading এর সাথে Guards ব্যবহার

Lazy Loading এর সাথে Guards ব্যবহার করলে আপনি অ্যাপ্লিকেশনের বিভিন্ন রাউটের জন্য নিরাপত্তা এবং অ্যাক্সেস নিয়ন্ত্রণ করতে পারেন। উদাহরণস্বরূপ, আপনি একটি CanActivate গার্ড ব্যবহার করতে পারেন যা শুধুমাত্র তখনই একটি লেজি লোডেড মডিউল লোড হতে দিবে যখন ব্যবহারকারী লগইন করেছে।

1. গার্ড তৈরি করা

প্রথমে Angular CLI দিয়ে গার্ড তৈরি করুন:

ng generate guard auth

এটি একটি auth.guard.ts ফাইল তৈরি করবে, যেখানে আপনি গার্ডের লজিক লিখবেন।

2. গার্ডের কোড

এখানে একটি CanActivate গার্ডের উদাহরণ দেওয়া হচ্ছে, যা চেক করবে যে ব্যবহারকারী লগইন করেছে কিনা। যদি না করে, তাহলে তাকে লগইন পেজে রিডাইরেক্ট করা হবে।

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';  // আপনার AuthService যেখানে লগইন স্টেট চেক করা হয়

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

এখানে, AuthGuard চেক করবে যে ইউজার লগইন করেছেন কিনা। যদি না করেন, তাহলে ইউজারকে /login পেজে রিডাইরেক্ট করবে।

3. গার্ডকে রাউট কনফিগারেশনে ব্যবহার করা

এখন, Lazy Loaded মডিউলের রাউট কনফিগারেশনে এই গার্ডটি যুক্ত করুন।

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule),
    canActivate: [AuthGuard]  // গার্ড যুক্ত করা হলো
  }
];

এখানে:

• canActivate প্রপার্টি ব্যবহার করা হয়েছে যাতে ইউজার শুধুমাত্র তখনই FeatureModule অ্যাক্সেস করতে পারে যখন গার্ডের শর্ত পূর্ণ হবে।

4. মডিউল কনফিগারেশন

এটি নিশ্চিত করতে হবে যে গার্ডটি শুধুমাত্র প্রয়োজনীয় সময়ই রাউট লোড করবে। উদাহরণস্বরূপ, feature.module.ts মডিউলে শুধুমাত্র যখন ইউজার অনুমতি পাবে তখনই এটি লোড হবে।

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: '', component: FeatureComponent }
    ])
  ],
  declarations: [FeatureComponent]
})
export class FeatureModule {}

সারাংশ

• Lazy Loading ব্যবহার করে অ্যাপ্লিকেশনের মডিউলগুলো প্রয়োজন অনুযায়ী লোড করা হয়, যা অ্যাপ্লিকেশনের পারফরম্যান্স বাড়ায়।
• Guards ব্যবহার করে আপনি রাউট অ্যাক্সেস নিয়ন্ত্রণ করতে পারেন, যেমন কেবলমাত্র লগইন করা ইউজাররা নির্দিষ্ট রাউটে যেতে পারবে।
• Lazy Loading এবং Guards একত্রে ব্যবহার করলে অ্যাপ্লিকেশনের নিরাপত্তা এবং পারফরম্যান্স আরও উন্নত হয়, এবং ডেটা ফেচিংয়ের সময় ও কম্পোনেন্ট লোডিং আরও কার্যকর হয়।

এভাবে Lazy Loading এবং Guards আপনার Angular অ্যাপ্লিকেশনে নিরাপত্তা এবং পারফরম্যান্স বাড়াতে গুরুত্বপূর্ণ ভূমিকা রাখে।